<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CSI餐厅小筑 外卖网</title>
    <link href="../assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="../assets/plugins/footable/css/footable.core.css" rel="stylesheet">
    <link href="../assets/plugins/bootstrap-select/bootstrap-select.min.css" rel="stylesheet" />
    <link href="css/style.css" rel="stylesheet">
    <link href="css/colors/blue.css" id="theme" rel="stylesheet">
    <!-- react -->
    <script src="../build/react.development.js"></script>
    <script src="../build/react-dom.development.js"></script>
    <script src="../build/babel.min.js"></script>
    <script src="../config.js"></script>
</head>

<body class="fix-header card-no-border logo-center">
    <div class="preloader">
        <svg class="circular" viewBox="25 25 50 50">
            <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" /> </svg>
    </div>
    <div id="main-wrapper">
        <header class="topbar">
            <nav class="navbar top-navbar navbar-expand-md navbar-light">
                <div class="navbar-collapse">
                    <div class="navbar-nav mr-auto mt-md-0">
                        <div class="nav-item"> <a class="navbar-brand" href="https://github.com/LimonSea/CSI-takeout-Course-design-project"><img
                                    src="../assets/images/logo.png" class="light-logo" alt="homepage" /></a> </div>
                    </div>
                    <ul class="navbar-nav my-lg-0">
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle text-muted waves-effect waves-dark" href=""
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img
                                    src="../assets/images/users/7.jpg" alt="user" class="profile-pic" /></a>
                            <div class="dropdown-menu dropdown-menu-right scale-up">
                                <ul class="dropdown-user">
                                    <li>
                                        <div class="dw-user-box">
                                            <div class="u-img"><img src="../assets/images/users/7.jpg" alt="user"></div>
                                            <div class="u-text">
                                                <h4>admin</h4>
                                            </div>
                                        </div>
                                    </li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="mealtype.html"><i class="mdi mdi-book-open-variant"></i>菜系管理</a></li>
                                    <li><a href="#"><i class=" mdi mdi-clipboard-text"></i>菜品管理</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="admin-order-list.html"><i class="mdi mdi-cart-outline"></i> 订单管理</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="user-list.html"><i class="mdi mdi-account-star-variant"></i> 用户管理</a>
                                        <ul id>
                                            <li><a href="user-list.html">普通用户</a></li>
                                            <li><a href="admin-list.html">管理员</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="login.html"><i class="fa fa-power-off"></i>退出登录</a></li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
            </nav>
        </header>
        <aside class="left-sidebar">
            <div class="scroll-sidebar">
                <nav class="sidebar-nav">
                    <ul id="sidebarnav">
                        <li> <a class="has-arrow waves-effect waves-dark" href="mealtype.html"
                                aria-expanded="false"><i class="mdi mdi-book-open-variant"></i><span
                                    class="hide-menu">菜系管理</span></a>
                        </li>
                        <li class="three-column"> <a class="has-arrow waves-effect waves-dark" href="#"
                                aria-expanded="false"><i class="mdi mdi-clipboard-text"></i><span
                                    class="hide-menu">餐品管理</span></a>
                        </li>
                        <li class="two-column"> <a class="has-arrow waves-effect waves-dark"
                                href="admin-order-list.html" aria-expanded="false"><i
                                    class="mdi mdi-cart-outline"></i><span class="hide-menu">订单管理</span></a>
                        </li>
                        <li class="nav-small-cap">FORMS, TABLE &amp; WIDGETS</li>
                        <li class="two-column"> <a class="has-arrow waves-effect waves-dark" href="add-user.html"
                                aria-expanded="false"><i class="mdi mdi-account-star-variant"></i><span
                                    class="hide-menu">用户管理</span></a>
                            <ul aria-expanded="false" class="collapse">
                                <ul>
                                    <li><a href="user-list.html">普通用户</a></li>
                                </ul>
                                <ul>
                                    <li><a href="admin-list.html">管理员</a></li>
                                </ul>
                            </ul>
                        </li>
                    </ul>
                </nav>
            </div>
        </aside>
        <!-- 餐品列表的组件 -->
        <div class="page-wrapper" id="mealList"></div>
        <div class="right-sidebar">
                    <div class="slimscrollright">
                        <div class="rpanel-title"> Service Panel <span><i class="ti-close right-side-toggle"></i></span> </div>
                        <div class="r-panel-body">
                            <ul id="themecolors" class="m-t-20">
                                <li><b>With Light sidebar</b></li>
                                <li><a href="javascript:void(0)" data-theme="default" class="default-theme">1</a></li>
                                <li><a href="javascript:void(0)" data-theme="green" class="green-theme">2</a></li>
                                <li><a href="javascript:void(0)" data-theme="red" class="red-theme">3</a></li>
                                <li><a href="javascript:void(0)" data-theme="blue" class="blue-theme working">4</a></li>
                                <li><a href="javascript:void(0)" data-theme="purple" class="purple-theme">5</a></li>
                                <li><a href="javascript:void(0)" data-theme="megna" class="megna-theme">6</a></li>
                                <li class="d-block m-t-30"><b>With Dark sidebar</b></li>
                                <li><a href="javascript:void(0)" data-theme="default-dark" class="default-dark-theme">7</a></li>
                                <li><a href="javascript:void(0)" data-theme="green-dark" class="green-dark-theme">8</a></li>
                                <li><a href="javascript:void(0)" data-theme="red-dark" class="red-dark-theme">9</a></li>
                                <li><a href="javascript:void(0)" data-theme="blue-dark" class="blue-dark-theme">10</a></li>
                                <li><a href="javascript:void(0)" data-theme="purple-dark" class="purple-dark-theme">11</a></li>
                                <li><a href="javascript:void(0)" data-theme="megna-dark" class="megna-dark-theme ">12</a></li>
                            </ul>
                            <ul class="m-t-20 chatonline">
                                <li><b>Chat option</b></li>
                                <li>
                                    <a href="javascript:void(0)"><img src="../assets/images/users/1.jpg" alt="user-img" class="img-circle"> <span>Varun Dhavan <small class="text-success">online</small></span></a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)"><img src="../assets/images/users/2.jpg" alt="user-img" class="img-circle"> <span>Genelia Deshmukh <small class="text-warning">Away</small></span></a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)"><img src="../assets/images/users/3.jpg" alt="user-img" class="img-circle"> <span>Ritesh Deshmukh <small class="text-danger">Busy</small></span></a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)"><img src="../assets/images/users/4.jpg" alt="user-img" class="img-circle"> <span>Arijit Sinh <small class="text-muted">Offline</small></span></a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)"><img src="../assets/images/users/5.jpg" alt="user-img" class="img-circle"> <span>Govinda Star <small class="text-success">online</small></span></a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)"><img src="../assets/images/users/6.jpg" alt="user-img" class="img-circle"> <span>John Abraham<small class="text-success">online</small></span></a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)"><img src="../assets/images/users/7.jpg" alt="user-img" class="img-circle"> <span>Hritik Roshan<small class="text-success">online</small></span></a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)"><img src="../assets/images/users/8.jpg" alt="user-img" class="img-circle"> <span>Pwandeep rajan <small class="text-success">online</small></span></a>
                                </li>
                            </ul>
                        </div>
                    </div>
        </div>
    </div>
        </div>
    </div>
    <script src="../assets/plugins/jquery/jquery.min.js"></script>
    <script src="../assets/plugins/bootstrap/js/popper.min.js"></script>
    <script src="../assets/plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="js/jquery.slimscroll.js"></script>
    <script src="js/waves.js"></script>
    <script src="js/sidebarmenu.js"></script>
    <script src="../assets/plugins/sticky-kit-master/dist/sticky-kit.min.js"></script>
    <script src="../assets/plugins/sparkline/jquery.sparkline.min.js"></script>
    <script src="js/custom.min.js"></script>
    <script src="../assets/plugins/footable/js/footable.all.min.js"></script>
    <script src="../assets/plugins/bootstrap-select/bootstrap-select.min.js" type="text/javascript"></script>
    <script src="js/footable-init.js"></script>
    <script src="../assets/plugins/styleswitcher/jQuery.style.switcher.js"></script>
    <script type="text/babel">


    class MealList extends React.Component{
        constructor(props) {
            super(props)
            this.state = {                            
                meals: [
                // {
                //     id: 1,
                //     mealtype: '川菜',
                //     mealname: '麻婆豆腐',
                //     price: '16',
                //     file:'form-upload.html'
                // }
              ]
            }
        }
        componentDidMount() {
                // 获取菜品列表
                const that = this
                $.ajax({
                    type: 'GET',
                    async: false,
                    url: global.targetUrl + 'getmeallist',
                    headers: {
                        token: localStorage.token 
                    },
                    data: {
                        'currentpage': 0,
                        'mealstate':1
                       
                    },
                    success: function (res) {
                        console.log('返回的',res)
                        
                        if (res.resultMsg.code === 1000) {
                            let num = res.bean.totalpage
                            let meals = res.bean.pojo
                            for (let i = 1; i < num; i++) {
                                $.ajax({
                                    type: 'GET',
                                    async: false,
                                    url: global.targetUrl + 'getmeallist',
                                    headers: {
                                        token: localStorage.token 
                                    },
                                    data: {
                                        'currentpage': i,
                                        'mealstate':1
                                    },
                                    success: function (ress) {
                                        console.log('分页 ', ress)
                                        if (ress.resultMsg.code === 1000) {
                                            meals = meals.concat(ress.bean.pojo)
                                        }
                                    }
                                })
                            }
                            that.setState({
                                meals: meals
                            })
                        }
                    }
                })

        }
        // 删除一条菜品信息
        delete(mealid){
            console.log('mealid:',mealid)
            // 根据userid删除管理员
            const that = this;
           
            $.ajax({
                type: 'POST',
                url: global.targetUrl + 'manager/updatemealstate',
                headers: {
                    token: localStorage.token 
                },
                data: {
                    mealid:mealid,
                    state:-1
                },
                success: function (res) {
                    console.log('请求删除',res)
                    if (res.resultMsg.code === 1000) {
                        alert('删除成功')
                        that.componentDidMount()
                    }
                },
                error:function(){
                    console.log("接收失败！")
                }
            })

        }
        render(){
            return(
                <div className="container-fluid">
                <div className="row">
                    <div className="col-12">
                        <div className="card">
                            <div className="table-responsive">
                                <table id="demo-foo-addrow" className="table m-t-30 table-hover contact-list" data-page-size="10">
                                    <thead>
                                        <tr>
                                            <th>序号</th>
                                            <th>菜系名称</th>
                                            <th>菜名</th>
                                            <th>价格</th>
                                            <th>编辑</th>
                                            <th>图片</th>
                                            <th>删除</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                            {
                                                this.state.meals.map(item => {return(
                                                    <tr key={item.mealid}>
                                                        <td>{item.mealid}</td>
                                                        <td>{item.typename}</td>
                                                        <td>{item.mealname}</td>
                                                        <td>{item.mealprice}</td>
                                                        <td ><a href={'manager-meal.html?mealid='+item.mealid+'&typename='+item.typename+'&mealname='+item.mealname+'&mealprice='+item.mealprice}> 编辑</a></td>
                                                        <td><a href={'form-upload.html?mealid='+item.mealid}>上传</a></td>
                                                        <td>
                                                            <button type="button" onClick={this.delete.bind(this, item.mealid)} className="btn btn-sm btn-icon btn-pure btn-outline delete-row-btn" data-toggle="tooltip" data-original-title="Delete"><i className="ti-close" aria-hidden="true"></i></button>
                                                        </td>
                                                    </tr>
                                                    ) }
                                                
                                                )
                                            }
                                        
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <td colSpan="2">
                                                <a href='add-meal.html'><button type="button" className="btn btn-info btn-rounded" data-toggle="modal" data-target="#add-contact">添加</button></a>
                                            </td>
                                            <td colSpan="7">
                                                <div className="text-right">
                                                    <ul className="pagination"> </ul>
                                                </div>
                                            </td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            )
        }
    }
    ReactDOM.render (
          <MealList />,
          document.getElementById('mealList')
        )
    </script>
</body>

</html>